<template>
    <div>
        <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false"
            width="30%"
            center
            :destroy-on-close="true" v-dialogDrag>

            <div style="text-align:center;">
                <el-image style="width: 300px; height: 300px;" :src="src">
                    <div slot="error" class="imageError">
                 <span>暂无图片</span>
              </div>
                </el-image>
            </div>
            <div style="text-align:center;">
                <h3 style="color:#009688;">出厂编码：{{ row.ccbm }}</h3>
            </div>
            <span slot="footer" class="dialog-footer" v-if="footerVisible">
                <el-button v-if="!Show" type="primary" @click="handleSubmit()" :size="size" :disabled="Show==true?true:false">确认</el-button>
                <el-button v-if="!Show" type="primary" @click="handleCancel()" :size="size">取消</el-button>
                <el-button v-if="Show" type="primary" @click="handleDownload()" :size="size">下载二维码</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { generateQRCodeFrom } from "../model/generateQRCode";
import { generateQRCode } from '@/api/equip/generateQRCode.js'
export default {
    data() {
        return {
            Show:false,
            dialogProps: {
                visible: false,
                title: "设备标签",
                width: "70%",

            },
            footerVisible: true,
            size: "medium",
            ruleForm: generateQRCodeFrom.FormData,
            rules: generateQRCodeFrom.rules,
            disabledForm: true,
            zxoptions: [],
            xsnrShow: true,
            list: {
                data: []
            },
            row: {},
            url: '',
            srcList: [],
            erweimaurl: '',
            erweimaList: [],
            src: '',
            btnShow: true
        };
    },
    methods: {
        showDialog(row, type) {
            this.Show = false
            this.row=row
            generateQRCode.getEwmData(row.sbbm).then(res => {
                this.src = res.data[0].ewm
            }).catch(err => {
                console.log(err)
            })
            this.dialogProps.visible = true;
            if (type === 'icon') {
                this.Show = true
            } else {
                this.Show = false
            }
        },

        //确定
        handleSubmit() {
            this.Show = true
            var arr = [this.row]
            generateQRCode.getEwmByList(arr).then(res => {
                // this.row = {}
                // this.dialogProps.visible = false;
                // this.$emit('updateData')
            }).catch(err=>{
                console.error(err)
            })
        },
        //取消
        handleCancel() {
            this.row = {}
            this.Show = false
            this.dialogProps.visible = false;
        },
        handleDownload() {
            var link = document.createElement('a');
            link.href = this.src;
            link.download = this.row.ccbm + ".png";
            link.click();
            // this.row = {}
            // this.dialogProps.visible = false;
            this.$emit('updateData')
            this.handleCancel()
        },
        //确定关闭
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    this.handleCancel()
                    this.$emit('updateData')
                    this.dialogProps.visible = false;

                })
                .catch((_) => { });
        },
    },
};
// 创建一个简单的超链接渲染

</script>
<style>
.imageError{
    text-align: center;
    width: 160px;
    height: 100px;
    line-height: 100px;
    color: #606266;
  }
.el-dialog__footer {
    width: 100%;
    border-top: 1px solid #e8e8e8;
}
</style>
